<script setup lang="ts">
import { useTotal } from "./utils/hook";
defineOptions({
  name: "Welcome"
});

const {
  searchDate,
  searchParams,
  grJfLoading,
  tdjfLoading,
  wdkyList,
  grndList,
  tdndList,
  grydList,
  tdydjfList,
  loadDataByYear,
  exportModuleData
} = useTotal();
</script>
<template>
  <div class="home-total">
    <div class="header">
      <div class="h-two">
        <div class="common-title">
          <img width="7" height="7" src="@/assets/home/title.png" />
          <div class="title">全院科研</div>
        </div>
        <div class="flex flex-wrap">
          <div
            v-for="(item, index) in wdkyList"
            :key="index"
            class="kj-cell common-bg"
          >
            <div class="kj-left">
              <img v-if="item.img" width="40" :src="item.img" />
              <img v-else width="40" src="@/assets/home/sum1.png" />
              <div class="ml-2">
                <div class="kj-count" :class="'kjc' + (index + 1)">
                  {{ item.zs }}
                </div>
                <div>{{ item.name || "--" }}</div>
              </div>
            </div>
            <div v-if="item.jxz != undefined" class="kj-right flex-1">
              <div class="w-[75px] m-auto text-left">
                <span class="font-bold" :class="'kjc' + (index + 1)">{{
                  item.jxz
                }}</span>
                <span class="pl-1">项进行中</span>
              </div>
              <div class="w-[75px] m-auto text-left">
                <span class="font-bold" :class="'kjc' + (index + 1)">{{
                  item.ywc
                }}</span>
                <span class="pl-1 w-[80px]">项完成 </span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- center -->
    <div class="flex items-center mb-3">
      <div class="mr-2 text-sm font-bold">选择日期:</div>
      <div>
        <el-date-picker
          v-model="searchDate"
          type="daterange"
          class="!w-[255px]"
          :clearable="false"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          value-format="YYYY-MM-DD"
          @change="loadDataByYear"
        />
      </div>
    </div>

    <div class="flex mb-5">
      <div class="flex-1 mr-[12px] overflow-hidden">
        <div class="common-title">
          <img width="7" height="7" src="@/assets/home/title.png" />
          <div class="title">
            <div>全院年度积分排名</div>
          </div>
          <el-button type="success" size="small" @click="exportModuleData"
            >导出</el-button
          >
        </div>
        <div class="common-bg">
          <div class="rank-cell th">
            <div class="rank">排名</div>
            <div class="rank-name">姓名</div>
            <div class="rank-score">积分</div>
          </div>
          <div v-loading="grJfLoading" class="all-lists">
            <div
              v-for="(item, index) in grndList"
              :key="index"
              class="rank-cell"
            >
              <div class="rank">
                <div class="ranking">{{ index + 1 }}</div>
              </div>
              <div class="rank-name">{{ item.name || "--" }}</div>
              <div class="rank-score color">{{ item.score || 0 }}</div>
            </div>
            <el-empty
              v-if="grndList.length == 0"
              class="m-auto !pb-0"
              :image-size="55"
              description="暂无数据~"
            />
          </div>
        </div>
      </div>
      <div class="flex-1 mr-[12px] overflow-hidden">
        <div class="common-title">
          <img width="7" height="7" src="@/assets/home/title.png" />
          <div class="title">团队年度总积分排名</div>
        </div>
        <div class="common-bg">
          <div class="rank-cell th">
            <div class="rank">排名</div>
            <div class="rank-name">科研团队名称</div>
            <div class="rank-score">积分</div>
          </div>
          <div v-loading="tdjfLoading" class="all-lists">
            <div
              v-for="(item, index) in tdndList"
              :key="index"
              class="rank-cell"
            >
              <div class="rank">
                <div class="ranking">{{ index + 1 }}</div>
              </div>
              <div class="rank-name cursor-pointer">
                <el-tooltip
                  effect="dark"
                  :content="item.teamName"
                  placement="top-start"
                >
                  {{ item.teamName || "--" }}
                </el-tooltip>
              </div>
              <div class="rank-score color">{{ item.score || 0 }}</div>
            </div>

            <el-empty
              v-if="tdndList.length == 0"
              class="m-auto !pb-0"
              :image-size="55"
              description="暂无数据~"
            />
          </div>
        </div>
      </div>
      <div class="flex-1 mr-[12px] overflow-hidden">
        <div class="common-title">
          <img width="7" height="7" src="@/assets/home/title.png" />
          <div class="title">
            <div>个人月度积分增长最快</div>
          </div>
        </div>
        <div class="common-bg">
          <div class="rank-cell th">
            <div class="rank">排名</div>
            <div class="rank-name">姓名</div>
            <div class="rank-score">积分</div>
          </div>
          <div class="all-lists">
            <div
              v-for="(item, index) in grydList"
              :key="index"
              class="rank-cell"
            >
              <div class="rank">
                <div class="ranking">{{ index + 1 }}</div>
              </div>
              <div class="rank-name">{{ item.name || "--" }}</div>
              <div class="rank-score color">{{ item.score || 0 }}</div>
            </div>

            <el-empty
              v-if="grydList.length == 0"
              class="m-auto !pb-0"
              :image-size="55"
              description="暂无数据~"
            />
          </div>
        </div>
      </div>
      <div class="flex-1 overflow-hidden">
        <div class="common-title">
          <img width="7" height="7" src="@/assets/home/title.png" />
          <div class="title">团队月度积分增长最快</div>
        </div>
        <div class="common-bg">
          <div class="rank-cell th">
            <div class="rank">排名</div>
            <div class="rank-name">科研团队名称</div>
            <div class="rank-score">积分</div>
          </div>
          <div class="all-lists">
            <div
              v-for="(item, index) in tdydjfList"
              :key="index"
              class="rank-cell"
            >
              <div class="rank">
                <div class="ranking">{{ index + 1 }}</div>
              </div>
              <div class="rank-name cursor-pointer">
                <el-tooltip
                  effect="dark"
                  :content="item.teamName"
                  placement="top-start"
                >
                  {{ item.teamName || "--" }}
                </el-tooltip>
              </div>
              <div class="rank-score color">{{ item.score || 0 }}</div>
            </div>
            <el-empty
              v-if="tdydjfList.length == 0"
              class="m-auto !pb-0"
              :image-size="55"
              description="暂无数据~"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.common-title {
  font-size: 15px;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  .title {
    width: 100%;
    font-weight: bold;
    padding-left: 6px;
  }
}
.all-lists {
  height: 500px;
  overflow: auto;
  padding-top: 5px;
}
.common-bg {
  padding: 12px;
  background-color: #fff;
  border-radius: 5px;
}
.home-total {
  min-width: 1100px;
  box-shadow: none !important;
  overflow-x: hidden;
}
.rank-cell {
  font-size: 13px;
  height: 25px;
  line-height: 25px;
  display: flex;
  margin-top: 5px;
  &.th {
    font-size: 14px;
    font-weight: bold;
    height: 28px;
    line-height: 20px;
    margin: 0;
    padding-bottom: 5px;
    border-bottom: 1px solid #efefef;
  }
  .rank {
    width: 45px;
  }
  .ranking {
    width: 23px;
    height: 23px;
    font-size: 13px;
    border-radius: 50%;
    background-color: #c0ebff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .rank-name {
    flex: 1;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .rank-score {
    width: 60px;
    text-align: center;
    &.color {
      color: #5a78ff;
      font-weight: bold;
    }
  }
}
.achiev-box {
  width: 320px;
  min-height: 150px;
  padding: 12px;
  margin: 0 12px 12px 0;
  background: linear-gradient(121deg, #fefefe -17%, #dee6ed 142%);
  border: 4px solid;
  border-radius: 10px;
  box-sizing: border-box;
  border-image: conic-gradient(
      from 180deg at 50% 50%,
      #cda33f 0deg,
      #9d6e2e 145deg,
      #e3d192 254deg,
      #cba540 360deg
    )
    4;
  position: relative;

  .achiev-title {
    font-weight: bold;
    padding-right: 60px;
    margin-bottom: 12px;
  }
  .achiev-img {
    position: absolute;
    top: 0;
    right: 10px;
  }
  .del {
    visibility: hidden;
    z-index: 11;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    .img {
      color: red;
      font-size: 18px;
      cursor: pointer;
    }
  }
}

.achiev-box:hover .del {
  visibility: inherit;
}

.header {
  font-size: 14px;
  display: flex;
  margin-bottom: 20px;
  .h-two {
    width: 100%;
    // width: 49.5%;
    .kj-cell {
      width: 32.7%;
      // flex: 1;
      min-width: 210px;
      height: 71px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 0 10px 10px 0;
      padding-right: 0;
      .kj-count {
        font-size: 18px;
        font-weight: bold;
        line-height: 20px;
        margin-bottom: 5px;
      }
      .kj-left {
        flex: 1;
        margin-right: 10px;
        display: flex;
        align-items: center;
      }
      .kj-right {
        position: relative;
        padding-left: 10px;
        text-align: center;
      }
      .kj-right::after {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: -13px;
        width: 2px;
        height: 26px;
        background-color: #d8d8d8;
      }
    }
    .kj-cell:nth-child(3n) {
      margin-right: 0;
    }
    .kjc1 {
      color: #00a6f3;
    }
    .kjc2 {
      color: #78ff5a;
    }
    .kjc3 {
      color: #ffb75a;
    }
    .kjc4 {
      color: #ff655a;
    }
    .kjc5 {
      color: #ff5aa2;
    }
    .kjc6 {
      color: #e15aff;
    }
    .kjc7 {
      color: #5a78ff;
    }
    .kjc8 {
      color: #5a78ff;
    }
    .kjc9 {
      color: #5a78ff;
    }
  }
  .h-first {
    width: 30%;
    margin-right: 12px;
    .todo-cell {
      height: 50px;
      display: flex;
      align-items: center;
      position: relative;
      padding-left: 8px;
      margin-bottom: 10px;
      background: linear-gradient(
        90deg,
        #f3fbff 0%,
        rgba(243, 251, 255, 0) 100%
      );
      border-radius: 2px;
      overflow: hidden;
      .t-count {
        width: 32%;
        color: #ff655a;
      }
    }
    .todo-cell::before {
      content: "";
      width: 2px;
      height: 100%;
      background-color: #00a6f3;
      position: absolute;
      left: 0;
    }
    .todo-cell:last-child {
      margin-bottom: 0;
    }
  }
}
</style>
